<template>
  <div class="header">
		<div class="header-left">
			<div class="iconfont back-icon">&#xe624;</div>
		</div>
		<input class="header-input" placeholder="输入城市/景点/游玩主题" v-model="place">
		
		<div class="header-right" @click="goToCity">
			{{this.city}}<span class="iconfont arrow-icon">&#xe784;</span>
		</div>
	</div>
</template>

<script>
	import { mapState,mapGetters } from 'vuex'
export default {
  name: 'HomeHeader',
  data () {
    return {
      place:''
    }
  },
	computed:{
		...mapState(['city']),
		...mapGetters(['doubleCity'])
	},
	methods:{
		goToCity (){
			this.$router.push('/city')
		}
	}
}
</script>

<style scoped lang="scss">
	@import "~@/styles/varibles.scss";
.header{
	display: flex;
	line-height: $headerHeight;
	background: $bgColor;
	color:#FFF;
	.header-left{
		width:.86rem;
		float:left;
		.back-icon{
			text-align: center;
			font-size: .4rem;
		}
	}
	.header-input{
		flex:1;
		height:.64rem;
		line-height: .64rem;
		margin-top:.12rem;
		margin-left:.2rem;
		background: #FFF;
		border-radius: .1rem;
		color:#ccc;
	}
	.header-right{
		min-width:1.04rem;
		padding:0 .1rem;
		float:right;
		text-align: center;
		.arrow-icon{
			margin-top:.4rem;
		}
	}
}
</style>
